This tutorial is a step-by-step guide for you to learn the basic features of HTML-Optimizer Pro. 

Tip: print this out and read it while you're trying the program.

Introduction

This tutorial should be used together with the folder "TestWebFolder" that you find in the HTML-Optimizer Pro program folder. TestWebFolder is a very small fake web folder that holds 3 HTML pages and 2 folders with images.
The opening page is Index.html. This page contains intentional errors that you may find by using HTML-Optimizer Pro - see later. The other two pages are 'real pages' that contain rather complex JavaScript code and serve to demonstrate how many bytes you can save by optimizing, without corrupting the code! By the way, if you are currently using some other optimizing program, it's a good idea to test it with these two pages.

If you have not yet added TestWebFolder to the program's Web Folder Menu, please do this now:

1. Select 'Add Web Folder to Web Folder Menu...' from the Configure menu.
2. In the Open Folder Dialog, browse to the HTML-Optimizer Pro folder, select TestWebFolder and press the Choose button.
3. A duplicate of TestWebFolder will be saved in the Optimizer Output folder. This duplicate is named TESTWEBFOLDER, in capitals, to distinguish it from the original folder.

Remember that the idea to work with a duplicate web folder is to protect your original files. The original web folder is for you to work with and the duplicate web folder is for HTML-Optimizer Pro to work with. Of course, you upload your optimized pages from the duplicate web folder!

NOTE: If TestWebFolder is the very first folder that you use, it's recommended that you choose 'Reset Configuration' from the Configure menu when you have finished working with TestWebFolder. This will remove it from the Current Web Folder menu and clear any settings related to it.

Optimizing and viewing web pages

1. Launch HTML-Optimizer Pro if it's not open yet and select TestWebFolder in the Web Folder Menu, which is at the bottom of the program's main window.

2. Select 'Entire Web Folder' and then press the Start button. Note that the Select button changes its name to Start because there is no need to make a further selection.

3. In a split second the three web pages are optimized and you see the result in the Log. The optimized files reside in the duplicate web folder, as indicated in the Log's heading when you click on a line in the Log.

4. If you select the line in the Log, the View Code and View Page buttons are activated. Click on View Page.

5. Your browser will open the page and you can check if it renders well after being optimized. You don't need to do that every time but it's nice that you can check it if you like. If the page is not rendered well, you may choose Unicode UTF-8 as the text encoding system - see the 'Miscellaneous' tab in Preferences.

6. Return from the browser to HTML-Optimizer Pro and press the View Code button.

7. The Code Field that displays the source code of the page will replace the Log. You can click the small triangle at the left to enlarge the Code Field.

8. Next to the Select button you see the Same Again button but it's dimmed. To enable this button, you select 'File' instead of 'Entire Web Folder' and press the Select button to optimize the page "Index.html" in TestWebFolder. When completed, the Same Again button is available. This is handy because you do not have to evoke the Open Dialog to select the same file again. Just try it by pressing the Same Again button. In a flash the file is optimized again!

9. You might ask what's the use of optimizing the file again. Well, not much, but if you want to perform another action with the same file, you will discover it's very useful indeed. This brings us to the next chapter:

Using another function instead of Optimizing

1. Let's check if the links in the file you just optimized are all valid. Set the Function popup menu to 'Check Internal Links' and press the Same Again button. If the previous page was Index.html, you will discover two bad links, one to "demo.htm" and one to "images/demo.gif".
Note that you can vary the column widths. This comes in handy if the bad link is so long that the text is condensed and thus difficult to read.

2. To be honest, in some rare cases HTML-Optimizer Pro could flag a bad link while it's perfectly OK. If you come across such a thing, please send the original file to us and report the problem in your email to <bugs@tonbrand.nl>.

3. Now choose the 'Check Tags' function and hit the Same Again button again. If you have not changed the default preferences you will see four lines in the Log reporting a problem.
If you go to the Miscellaneous Tab in Preferences and check 'Check for Deprecated Tags' and 'Check for Missing </P> Tags', press the Save button and then the Same Again button, you will see that we have 6 problems.

3.1. Just a note about the Width and Height attributes. This concerns obviously an IMG SRC tag and you know that adding these attributes help to build the page by the browser much faster. The attributes are added to the Index.html page in the duplicate web folder TESTWEBFOLDER.

3.2. Note that if corrections are added to a page, these are added to the duplicate page and that an existing optimized page will be overwritten. This is something you should keep in mind. See the next chapter "Adding missing attributes and converting special characters' for the right procedure.

4. The last function to try out is 'Converting Special Characters'. Do this with the Index.html page and see that 5 special characters needed to be converted.
Note that this function is only available if you have chosen MacRoman as the current text encoding system - see the 'Miscellaneous' tab in Preferences. 

Smart Handling

1. If you select 'Smart Handling' and you work with a folder or the entire web folder, only those files will be handled that you have changed. Smart Handling can be date+time sensitive or date (today) sensitive, at choice.

2. Suppose you have optimized your entire web folder that consists of 100 pages. A few weeks later you decide to change 10 pages. You work for a day on these pages and then you start optimizing your entire web folder with Smart Handling turned on. Only these 10 pages will be handled with a single mouse-click!

3. If you have used Smart Handling in the 'Date+Time' mode and you discover that you have to use that function again, you will find that you can't.
In that case, set the Smart Handling mode in Preferences (under the Filters tab) to 'Date (Today)' and you can use Smart Handling as many times as you want (that day).

Adding a new web folder to HTML-Optimizer Pro

1. In the Configure menu you find the command to add a new web folder. The web folder in question will then appear in the Current Web Folder menu. This makes it very easy for you to switch from one web folder to another.

2. If you are working with Web Folder A and you select a file from Web Folder B, you will be prompted and HTML-Optimizer Pro can make the switch for you. This is particularly useful if you use the Drag & Drop feature and you drop a file (or files) from Web Folder B while Web Folder A is the current web folder.

The History Log

1. In the History Log you find what you have done in the past. For each function there is a separate Log. You can also open the Log with BBEdit - see the File menu.

2. When the Log gets fuller and fuller, it's a good idea to purge it - see the File menu. A full Log will become slower in opening.

Drag & Drop

1. There are two drag & drop possibilities:

1.1. You can drop files on HTML-Optimizer Pro's icon. This will launch the program if it's not open yet and execute the current function.

1.2. You can drop files on the drop spot just above the View Code button.

2. It's not possible to drop folders.

3. After having dropped files, you can use the Same Again button as usual.

Conclusion

1. If you have read this tutorial and executed the tests with TestWebFolder, you know enough to get started. There are of course more things to discover and to explain, but that you will experience while you're actually working with HTML-Optimizer Pro.

2. For more information you have the Manual, built into the program. We strongly recommend that you read it once; it's not that long and it may give you hints you would not have thought of. You may also print the manual.

3. If you ever come across a problem that you cannot solve, don't hesitate to ask for our free support. You can mail to <support@tonbrand.nl> or go to the Support page of our web site.

Enjoy!